<template>
  <main class="appreciation-page" role="main">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <header class="page-header">
            <h1 class="page-title">赞赏支持</h1>
            <p class="page-subtitle">如果您觉得我们的内容对您有帮助，欢迎支持我们的创作</p>
          </header>

          <section class="appreciation-content">
            <div class="support-card">
              <div class="support-icon">
                <i class="fa fa-heart" aria-hidden="true"></i>
              </div>
              <h2>感谢您的支持</h2>
              <p>
                您的每一份支持都是我们持续创作的动力。我们承诺将继续为大家提供高质量的技术内容，
                分享最新的编程技术和开发经验。
              </p>

              <div class="support-methods">
                <h3>支持方式</h3>
                <div class="method-grid">
                  <div class="method-item">
                    <i class="fa fa-star" aria-hidden="true"></i>
                    <h4>分享文章</h4>
                    <p>将有价值的文章分享给更多人</p>
                  </div>
                  <div class="method-item">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    <h4>留言反馈</h4>
                    <p>给我们留言，提出宝贵建议</p>
                  </div>
                  <div class="method-item">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <h4>点赞关注</h4>
                    <p>关注我们的更新，点赞支持</p>
                  </div>
                  <div class="method-item">
                    <i class="fa fa-gift" aria-hidden="true"></i>
                    <h4>赞赏打赏</h4>
                    <p>通过赞赏支持我们的创作</p>
                  </div>
                </div>
              </div>

              <div class="appreciation-note">
                <h3>致谢</h3>
                <p>
                  感谢每一位读者的支持与陪伴。正是因为有了您们的鼓励，
                  我们才能在技术分享的道路上走得更远。让我们一起在技术的海洋中探索前行！
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { setSEO } from "@/utils/seo";

// 设置赞赏页面SEO
onMounted(() => {
  setSEO({
    title: "赞赏支持",
    description: "支持数知笔记的创作 - 如果您觉得我们的技术内容对您有帮助，欢迎通过各种方式支持我们的创作。",
    keywords: "赞赏支持,技术创作,内容支持,数知笔记,技术博客",
    canonicalUrl: window.location.origin + "/appreciation",
  });
});
</script>

<style lang="scss" scoped>
.appreciation-page {
  margin-top: 3vh;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 0;
  padding-top: 2rem; // 恢复正常间距
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="hearts" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><text x="10" y="15" text-anchor="middle" fill="rgba(255,255,255,0.1)" font-size="12">♥</text></pattern></defs><rect width="100" height="100" fill="url(%23hearts)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
  }

  .container {
    position: relative;
    z-index: 1;
  }

  .page-header {
    text-align: center;
    margin-bottom: 3rem;
    color: white;

    .page-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

      @media (max-width: 768px) {
        font-size: 2.5rem;
      }
    }

    .page-subtitle {
      font-size: 1.25rem;
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }
  }

  .appreciation-content {
    .support-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-align: center;

      @media (max-width: 768px) {
        padding: 2rem;
      }

      .support-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem;
        animation: heartbeat 2s ease-in-out infinite;

        i {
          font-size: 2rem;
          color: white;
        }
      }

      h2 {
        font-size: 2rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1.5rem;
      }

      > p {
        font-size: 1.125rem;
        color: #5a6c7d;
        line-height: 1.8;
        margin-bottom: 3rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }

      .support-methods {
        margin: 3rem 0;

        h3 {
          font-size: 1.5rem;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 2rem;
        }

        .method-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1.5rem;
          margin-top: 2rem;

          .method-item {
            background: #f8fafc;
            border-radius: 16px;
            padding: 2rem 1.5rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;

            &:hover {
              transform: translateY(-8px);
              box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
              border-color: #667eea;
            }

            i {
              font-size: 2rem;
              color: #667eea;
              margin-bottom: 1rem;
            }

            h4 {
              font-size: 1.125rem;
              font-weight: 600;
              color: #2c3e50;
              margin-bottom: 0.75rem;
            }

            p {
              color: #5a6c7d;
              font-size: 0.925rem;
              line-height: 1.5;
              margin: 0;
            }
          }
        }
      }

      .appreciation-note {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16px;
        padding: 2rem;
        color: white;
        margin-top: 3rem;

        h3 {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 1rem;
        }

        p {
          font-size: 1rem;
          line-height: 1.7;
          margin: 0;
          opacity: 0.95;
        }
      }
    }
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .appreciation-page {
    .support-card {
      background: rgba(31, 41, 55, 0.95);
      border-color: rgba(75, 85, 99, 0.3);

      h2, h3, h4 {
        color: #f9fafb;
      }

      > p, p {
        color: #d1d5db;
      }

      .method-item {
        background: #374151;
        border-color: transparent;

        &:hover {
          border-color: #60a5fa;
        }

        h4 {
          color: #f9fafb;
        }

        p {
          color: #d1d5db;
        }
      }
    }
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .appreciation-page {
    background: #000000;

    .support-card {
      background: #ffffff;
      border: 2px solid #000000;

      .method-item {
        border: 2px solid #000000;
      }

      .appreciation-note {
        background: #000000;
        border: 2px solid #ffffff;
      }
    }
  }
}

// 无障碍支持
@media (prefers-reduced-motion: reduce) {
  .support-icon {
    animation: none !important;
  }

  .method-item:hover {
    transform: none !important;
  }
}
</style>
